import React, {useState} from 'react';
import ReactQuill, {Quill} from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import 'quill-resize-module/dist/resize.css';
import ImageResize from 'quill-image-resize-module-react';

// 富文本编辑器的自定义工具栏
const modules = {
    // 方式1: 可以是简单的一维数组配置
    // toolbar: ["bold", "italic", "underline", "strike", "blockquote"]
    // 方式2: 可以配置二维数组，进行多个选项的配置
    // 或者针对某一个配置项的key值，进行配置
    toolbar: [
        'bold', 'italic', 'underline',
        {header: 1}, {header: 2},
        'blockquote', 'link',
        {list: 'ordered'}, {list: 'bullet'},
        'image',
    ],
    imageResize: {
        parchment: Quill.import('parchment')
    }
    // 方式3: 可以自己指定工具栏的容器
}
const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'video'
]

const MyQuill = (props) => {
    const {placeholder,contentChange,width,height,content,defaultValue} = props

    const handleChangeValue = (e) => {
        contentChange(e)
    }

    return (
        <div>
            <ReactQuill
                theme="snow"
                style={{width: width, height: height, background: 'white', color: 'black'}}
                preserveWhitespace
                placeholder={placeholder}
                defaultValue={defaultValue}
                // readOnly
                formats={formats}
                modules={modules}
                // ref={editorRef}
                value={content}
                onChange={handleChangeValue}
                // onChangeSelection={range => {
                //     console.log("onChangeSelection--->", range);
                // }}
                // onFocus={range => {
                //     console.log("onFocus--->", range);
                // }}
                // onBlur={previousRange => {
                //     console.log("onBlur--->", previousRange);
                // }}
            />
        </div>
    );
};

export default MyQuill;